<template>
  <div class="enterprise">
    <div class="operate card">
      <!-- <div >时间维度:</div> -->
      <div class="timedimension">
        <el-select style="width:70px" v-model="t_value" @change="t_change">
          <el-option v-for="item in options_t_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </div>
      <!-- <div>时间区间:</div> -->
      <div class="picker">
        <el-date-picker style="width:180px" v-model="s_time" :editable="false" :clearable="false" :type="d_type" :format="v_type" :value-format="v_type" :picker-options="pickerOptions"></el-date-picker>
      </div>
      <div class="hidden-xs-only">
        <i class="el-icon-minus"></i>
      </div>
      <div class="picker">
        <el-tooltip :content="content" placement="top">
          <el-date-picker style="width:180px" v-model="e_time" :editable="false" :clearable="false" :type="d_type" :format="v_type" :value-format="v_type" :picker-options="pickerOptions"></el-date-picker>
        </el-tooltip>
      </div>
      <div>
        <el-button type="primary" @click="t_button">查询</el-button>
      </div>
      <div class="export">
        <el-tooltip content="导出" placement="top">
          <el-button type @click="t_export">
            <i style="color:#0780EDfont-size:20px" class="iconfont icon-daochu"></i>
          </el-button>
        </el-tooltip>
      </div>
    </div>
    <el-row :gutter="14">
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <div class="card">
          <Mtitle title="企业分时电费占比">
          </Mtitle>
          <ecl v-loading="ec_l_loading" style="min-height:400px" v-no-data="ec_l_no_data" :ecdata="ec_l_data" unit="元" width="100%" height="100%"></ecl>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <div class="card">
          <Mtitle title="各车间分时用电量统计">
            <!-- <div @click="toggle">111</div> -->

          </Mtitle>
          <fullscreen ref="fullscreen">
            <ecr v-loading="ec_r_loading" style="min-height:400px" v-no-data="ec_r_no_data" :ecdata="ec_r_data" width="100%" height="100%"></ecr>
          </fullscreen>
        </div>
      </el-col>
    </el-row>
    <!-- <el-row class='card' :gutter="0">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" >
              <Mtitle title='用电量最大生产线与最小生产线负荷变化曲线'>
              </Mtitle>
                <ecb v-loading="ec_b_loading" style="height:400px"  :ecdata='ec_b_data' unit='kW' width='100%' height='100%'></ecb>
          </el-col>
    </el-row>-->
    <el-row class="card" :gutter="0">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <Mtitle title="企业用电详情"></Mtitle>
        <tb tableTitle="tb_001" :tableData="tableData" v-loading="table_loading" id="tab"></tb>

        <!-- <el-table
    :data="tableData"
    style="width: 100%"
    @expand-change='expand_change'
  >
    <el-table-column type="expand">
      <template slot-scope="props">
       <p>{{props.row}}}}</p>
      </template>
    </el-table-column>
        <el-table-column
      label="核算单元"
      prop="accountingUnitName">
    </el-table-column>
    <el-table-column
      label="总用电量"
      prop="sumQuantity">
    </el-table-column>
    <el-table-column
      label="总电费"
      prop="sumFees">
    </el-table-column>
        </el-table>-->
      </el-col>
    </el-row>
  </div>
</template>
<script>
import day from "@/utils/day.js"
import Mtitle from '@/components/Mtitle'
import ecl from '@/components/echarts/ec_pie'
import ecb from '@/components/echarts/ec_line'
import tb from '@/components/table'
import ecr from './ec_r'
import screenfull from 'screenfull'
export default {
  components: {
    Mtitle,
    ecl,
    ecr,
    ecb,
    tb
  },
  watch: {
  },
  data() {
    return {
      content: '查询时间跨度最大为24小时',
      ec_l_no_data: false,
      ec_r_no_data: false,
      tableData: [],
      // 初始开始时间
      s_time: "",
      // 初始结束时间
      e_time: "",
      // 初始日期格式
      v_type: "yyyy-MM-dd HH:mm",
      // 初始显示类型
      d_type: "datetime",
      // 日   月  年 
      t_value: 1,
      options_t_type: [
        {
          value: 1,
          label: "日"
        },
        {
          value: 2,
          label: "月"
        },
        {
          value: 3,
          label: "年"
        }
      ],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      // 获取年月日初始化时间对象
      CustTime: {},
      ec_l_data: [],
      ec_l_loading: true,
      ec_r_data: [],
      ec_r_loading: true,
      ec_b_data: [],
      ec_b_loading: true,
      query_button_loading_num: 0,
      table_loading: true,
      export_s_time: '',
      export_e_time: '',
      export_value: ''
    }
  },
  computed: {
  },
  watch: {
    query_button_loading_num(n, o) {
      if (n === 4) {
      }
    }
  },
  mounted() {
    // let t = document.getElementById("table").offsetTop
  },
  created() {
    // 初始化默认时间
    this.s_e = day.init_value(this.d_type)
    // this.s_time = this.s_e.s
    // this.e_time = this.s_e.e

    // 获取出事日期
    this.$nextTick(() => {
      this.getCustTime()
    })
  },
  methods: {
    toggle() {

      this.$refs['fullscreen'].toggle() // recommended
    },
    expand_change(
      row, expandedRows
    ) {
      console.log(row)
      // console.log(expandedRows)

    },

    on(a) {
      screenfull.request(document.getElementById(a))
    },
    off(a) {
      screenfull.exit(document.getElementById(a))
    },
    // 获取出事日期
    getCustTime() {
      this.$axios
        .post(this.Eelec + "/web/custElectricCount/getCustTime", {
          id: sessionStorage.getItem('custId')
        })
        .then(res => {
          if (res.data.code == 200) {
            if (res.data.data.dayEnd && res.data.data.dayStart) {
              this.CustTime = res.data.data
              this.s_time = res.data.data.dayStart
              this.e_time = res.data.data.dayEnd
              this.export_s_time = this.s_time
              this.export_e_time = this.e_time
              this.export_value = this.t_value
              this.getPercent(0)
              this.getSumQuantityByWorkshop(0)
              this.getSumQuantityByLine(0)
              this.getDetails(0)
              //   this.export_Starttime = this.Starttime
              //   this.export_Endtime = this.Endtime
              //   this.export_value = this.value
            }
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    //企业详情请求
    getDetails(n) {
      this.$axios
        .post(this.Eelec + "/web/custElectricCount/getDetail", {
          custId: sessionStorage.getItem('custId'),
          dateType: this.t_value,
          endTime: this.t_value === 1 ? this.e_time + ':00' : this.e_time,
          startTime: this.t_value === 1 ? this.s_time + ':00' : this.s_time
        })
        .then(res => {
          this.table_loading = false
          this.query_button_loading_num += n
          if (res.data.data && res.data.data.length) {
            this.tableData = res.data.data.filter((item, index) => {
              return item.type === '02'
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    //用电量最大生产线与最小生产线负荷变化曲线
    getSumQuantityByLine(n) {
      this.$axios
        .post(this.Eelec + "/web/custElectricCount/getSumQuantityByLine", {
          custId: sessionStorage.getItem('custId'),
          dateType: this.t_value,
          endTime: this.t_value === 1 ? this.e_time + ':00' : this.e_time,
          startTime: this.t_value === 1 ? this.s_time + ':00' : this.s_time
        })
        .then(res => {
          this.ec_b_loading = false
          this.query_button_loading_num += n
          this.a = []
          if (res.data.data && res.data.data.length > 0) {
            for (let i = 0; i < res.data.data.length; i++) {
              this.a.push({
                name: res.data.data[i].name,
                // time: [],
                value: []
              })
              if (res.data.data[i].list && res.data.data[i].list.list) {
                this.a[i].value = res.data.data[i].list.list[0].dataResp
              }
            }
          }
          this.ec_b_data = this.a
          console.log(this.ec_b_data)
        })
        .catch(err => {
          console.log(err)
        })
    },
    //各车间分时用电量统计
    getSumQuantityByWorkshop(n) {
      this.$axios
        .post(this.Eelec + "/web/custElectricCount/getSumQuantityByWorkshop", {
          custId: sessionStorage.getItem('custId'),
          dateType: this.t_value,
          endTime: this.t_value === 1 ? this.e_time + ':00' : this.e_time,
          startTime: this.t_value === 1 ? this.s_time + ':00' : this.s_time
        })
        .then(res => {
          this.ec_r_loading = false
          this.query_button_loading_num += n
          if (res.data.data && res.data.data.length) {
            this.ec_r_no_data = false
            this.ec_r_data = res.data.data
          } else {
            this.ec_r_no_data = true
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    //企业分时电费占比
    getPercent(n) {
      this.$axios
        .post(this.Eelec + "/web/custElectricCount/getPercent", {
          custId: sessionStorage.getItem('custId'),
          dateType: this.t_value,
          endTime: this.t_value === 1 ? this.e_time + ':00' : this.e_time,
          startTime: this.t_value === 1 ? this.s_time + ':00' : this.s_time
        })
        .then(res => {
          this.ec_l_loading = false
          this.query_button_loading_num += n
          if (res.data.data && res.data.data !== null) {
            this.ec_l_no_data = false
            this.ec_l_data = [
              {
                name: '尖',
                value: res.data.data.tipFees
              },
              {
                name: '峰',
                value: res.data.data.peakFees
              },
              {
                name: '平',
                value: res.data.data.flatFees
              }, {
                name: '谷',
                value: res.data.data.valleyFees
              }
            ]
          } else {
            this.ec_l_no_data = true
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    t_export() {
      this.export_show = true
      this.$axios
        .post(this.Eelec + "/web/custElectricCount/getDetailExcel", {
          dateType: this.export_value,
          custId: sessionStorage.getItem("custId"),
          endTime: this.export_value === 1 ? this.export_e_time + ':00' : this.export_e_time,
          startTime: this.export_value === 1 ? this.export_s_time + ':00' : this.export_s_time
        })
        .then(res => {
          if (res.data.code === 200) {
            this.export_show = false
            if (res.data.data) {
              window.location.href = res.data.data
              this.$message({
                message: "导出成功",
                type: "success"
              })
            }
          }
        })
    },
    // 点击查询
    t_button() {
      day.s_e(this.s_time, this.e_time, this.t_value)
        .then(() => {
          this.export_s_time = this.s_time
          this.export_e_time = this.e_time
          this.export_value = this.t_value
          this.query_button_loading_num = 0
          this.ec_l_loading = true
          this.ec_r_loading = true
          this.ec_b_loading = true
          this.table_loading = true
          this.getPercent(1)
          this.getSumQuantityByWorkshop(1)
          this.getSumQuantityByLine(1)
          this.getDetails(1)
        })
        .catch(() => { })
    },
    // 切换年月日
    t_change(n) {
      if (n === 1) {
        this.content = '查询时间跨度最大为24小时'
      }
      if (n === 2) {
        this.content = '查询时间跨度最大为31天'
      }
      if (n === 3) {
        this.content = '查询时间跨度最大为12个月'
      }
      this.v_type = day.change_type(n).v
      this.d_type = day.change_type(n).d
      this.s_e = day.init_value(this.d_type)
      this.s_time = this.s_e.s
      this.e_time = this.s_e.e
    }
  }
}
</script>
 <style scoped lang='scss'>
</style>
